<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }
        body,html,ul{
            width: 100%;
            height: 100%;
        }
        #ul li{
            width: 100%;
            height: 100%;
            text-align: center;
            /*background: red;*/
            font-size: 30px;
            color: #FFFFFF;
        }
        #ol{
            width: 80px;
            position: fixed;
            top:200px;
            left: 50px;
            border: 1px solid #cccccc;
        }
        #ol li{
            text-align: center;
            line-height: 30px;
            border-bottom: 1px solid #fff;
            cursor: pointer;
            color: #fff;
        }
        #ol li.current{
            background: orangered;
        }
    </style>

</head>
<body>
<ol id="ol">
    <li class="current">第一层</li>
    <li>第二层</li>
    <li>第三层</li>
    <li>第四层</li>
    <li>第五层</li>
</ol>
<ul id="ul">
    <li >第一层内容</li>
    <li>第二层内容</li>
    <li>第三层内容</li>
    <li>第四层内容</li>
    <li>第五层内容</li>
</ul>
<script src="js/myFunc.js"></script>
<script>
    window.onload = function () {
        var ul = document.getElementById("ul");
        var ol = document.getElementById("ol");
        var allul = ul.children;
        var allol = ol.children;
        var isClick = false;

        var colorArr = ['red', 'green', 'blue', 'purple', 'yellow'];

        for(var i = 0;i<allul.length;i++){
            allul[i].style.background = colorArr[i];
        }
        for(var j = 0;j<allol.length;j++){
            (function (index) {
                var olli = allol[index];
                olli.onmousedown = function () {
                    isClick = true;
                    for(var i=0;i<allol.length;i++){
                        allol[i].className=""
                    }
                    this.className="current";
                    buffer(document.documentElement, {scrollTop: index * client().height,},function () {
                        isClick=false;
                    });
                }
            })(j);
        }
        window.onscroll = function () {
            if(!isClick){
                var scrolltop = scroll().top;
                for(var i=0;i<allol.length;i++){
                    if(scrolltop>=allul[i].offsetTop){
                        for(var j=0;j<allol.length;j++){
                            allol[j].className="";
                        }
                        allol[i].className = "current";
                    }
            }

            }
        }
    }
</script>
</body>
</html>